<template>
  <view class="page-wrapper">
    <YgSearch />
    <view class="main">
      <view class="left">
        <view
          class="item1"
          @click="currentIndex = index"
          v-for="(item1, index) in list"
          :key="item1.cat_id"
        >
          <view class="text" :class="{ current: index === currentIndex }">{{
            item1.cat_name
          }}</view>
        </view>
      </view>
      <view class="right">
        <!-- 渲染二级分类, 二级分类在当前激活一级分类children 当中 -->
        <!-- list[currentIndex].children -->
        <view
          class="item2"
          v-for="item2 in list[currentIndex].children"
          :key="item2.cat_id"
        >
          <!-- item2 就是二级分类, 如大家电下的电视洗衣机冰箱等等 -->
          <view class="second-title">/{{ item2.cat_name }}/</view>
          <view class="list">
            <view
              class="item3"
              v-for="item3 in item2.children"
              :key="item3.cat_id"
            >
              <image class="img" :src="item3.cat_icon" mode="" />
              <view class="name">{{ item3.cat_name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    // 未优化
    data() {
      return {
        // 当前激活索引
        currentIndex: 0,
        // 全部分类列表
        list: [],
      };
    },
    onLoad() {
      this.loadPage();
    },
    methods: {
      async loadPage() {
        this.list = await uni.$u.http.get("/categories");
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 页面总容器
  .page-wrapper {
    // 高度满页, 内部内容纵向 flex 排列
    height: 100vh;
    display: flex;
    flex-direction: column;
    .main {
      // 主要内容占据除搜索剩余高度, 内部内容 flex 横向布局
      flex: 1;
      display: flex;
      // 限制主要内容盒子滚动
      // 左右两侧单独开放
      overflow: hidden;
      .left {
        width: 182rpx;
        overflow: auto;
        background-color: #f3f3f3;
        .item1 {
          padding: 18rpx 0;
          font-size: 28rpx;
          color: #585858;
          text-align: center;
          .current {
            color: #ea4350;
            border-left: 4rpx solid #ea4350;
            border-right: 4rpx solid transparent;
            font-weight: bold;
          }
        }
      }
      .right {
        // 占据除左侧以外的剩余宽度
        flex: 1;
        overflow: auto;
        .item2 {
          // 二级分类
          .second-title {
            font-size: 26rpx;
            color: #575757;
            text-align: center;
            margin: 40rpx 0;
          }
          .list {
            display: flex;
            flex-wrap: wrap;
            .item3 {
              width: 33.3%;
              text-align: center;
              .img {
                width: 120rpx;
                height: 120rpx;
              }
              .name {
                font-size: 21rpx;
                color: #2e2e2e;
              }
            }
          }
        }
      }
    }
  }
</style>